<div th:fragment="html">
    <script>
        $(function () {
            var oid = getUrlParms("oid");
            var data4Vue = {
                uri: 'foreconfirmPay',
                order: []
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                    this.load();
                },
                methods: {
                    load: function () {
                        var url = this.uri + "?oid=" + oid;
                        axios.get(url).then(function (response) {
                            vue.order = response.data;
                        });
                    }
                }
            });

        })
    </script>
    <div class="confirmPayPageDiv">
        <div class="confirmPayImageDiv">
            <img src="img/site/comformPayFlow.png">
            <div class="confirmPayTime1">
                {{order.createDate | formatDateFilter('YYYY-MM-DD HH:mm:ss')}}
            </div>
            <div class="confirmPayTime2">
                {{order.payDate | formatDateFilter('YYYY-MM-DD HH:mm:ss')}}
            </div>
            <div class="confirmPayTime3">
                {{order.deliveryDate | formatDateFilter()}}
            </div>
        </div>
        <div class="confirmPayOrderInfoDiv">
            <div class="confirmPayOrderInfoText">我已收到货，同意支付宝付款</div>
        </div>
        <div class="confirmPayOrderItemDiv">
            <div class="confirmPayOrderItemText">订单信息</div>
            <table class="confirmPayOrderItemTable">
                <thead>
                <tr>
                    <th colspan="2">宝贝</th>
                    <th width="120px">单价</th>
                    <th width="120px">数量</th>
                    <th width="120px">商品总价</th>
                    <th width="120px">运费</th>
                </tr>
                </thead>
                <tr v-for="oi in order.orderItems">
                    <td><img width="50px" :src="'https://igeek-tmall.oss-cn-hangzhou.aliyuncs.com/img/productSingle_middle/'+oi.product.firstProductImage.id+'.jpg'">
                    </td>
                    <td class="confirmPayOrderItemProductLink">
                        <a href="#nowhere">{{oi.product.name}}</a>
                    </td>
                    <td>￥{{oi.product.originalPrice|formatMoneyFilter}}</td>
                    <td>1</td>
                    <td><span class="conformPayProductPrice">￥{{oi.product.promotePrice|formatMoneyFilter}}</span></td>
                    <td><span>快递 ： 0.00 </span></td>
                </tr>
            </table>

            <div class="confirmPayOrderItemText pull-right">
                实付款： <span class="confirmPayOrderItemSumPrice">￥{{order.total|formatMoneyFilter}}</span>
            </div>


        </div>
        <div class="confirmPayOrderDetailDiv">

            <table class="confirmPayOrderDetailTable">
                <tr>
                    <td>订单编号：</td>
                    <td>{{order.orderCode}} <img width="23px" src="img/site/confirmOrderTmall.png"></td>
                </tr>
                <tr>
                    <td>卖家昵称：</td>
                    <td>天猫商铺 <span class="confirmPayOrderDetailWangWangGif"></span></td>
                </tr>
                <tr>
                    <td>收货信息：</td>
                    <td>{{order.address}}，{{order.receiver}}， {{order.mobile}}，{{order.post}}</td>
                </tr>
                <tr>
                    <td>成交时间：</td>
                    <td>{{order.createDate|formatDateFilter}}</td>
                </tr>
            </table>

        </div>
        <div class="confirmPayButtonDiv">
            <div class="confirmPayWarning">请收到货后，再确认收货！否则您可能钱货两空！</div>
            <a :href="'orderConfirmed?oid='+order.id">
                <button class="confirmPayButton">确认支付</button>
            </a>
        </div>
    </div>
</div>
